<template>
    <div style="display: flex;flex-direction: column;" class="container ">
        <div class="tabelBox">
            <el-table :header-cell-style="headerCellStyle" :cell-style="cellStyle" border="true" height="100%"
                      :data="tableData" style="width: 100%">
                <!-- <el-table-column fixed width="150" label="Serial Number" type="index" /> -->
                <el-table-column fixed label="创建时间" prop="sendTime" width="200">
                    <template #default="scope">
                        <div>
                            {{ dateFormater(scope.row.sendTime, true) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed label="卡种" prop="cardType" width="150">
                    <template #default="scope">
                        <div class="cardType">
                            <div class="name">
                                {{ scope.row.cardType }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="面额" prop="faceValue" width="150">
                    <template #default="scope">
                        <div>
                            {{ scope.row.faceValue }}&nbsp;{{ scope.row.currency }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status" width="150">
                    <template #default="scope">
                        <div>
                            {{ scope.row.checkStatus }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单号" prop="detailNo" width=""/>
                <el-table-column label="正面卡图" width="200">
                    <template #default="scope">
                        <div class=" CardsImages">
                            <div v-if="scope.row.imgFront">
                                <img
                                    @click="onPredivImage(0,[scope.row.imgFront,scope.row.imgBack,scope.row.imgReceipt])"
                                    :src=scope.row.imgFront alt=""
                                    mode="aspectFit"
                                    style="width: 1rem;" class="cardImg hover">
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="背面卡图" width="200">
                    <template #default="scope">
                        <div class=" CardsImages">
                            <div v-if="scope.row.imgBack">
                                <img @click="onPredivImage(1,[scope.row.imgBack])"
                                     :src=scope.row.imgBack alt=""
                                     mode="aspectFit"
                                     style="width: 1rem;" class="cardImg hover">
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="凭证" width="200">
                    <template #default="scope">
                        <div class=" CardsImages">
                            <div v-if="scope.row.imgReceipt">
                                <img @click="onPredivImage(2,[scope.row.imgReceipt])"
                                     :src=scope.row.imgReceipt alt=""
                                     mode="aspectFit"
                                     style="width: 1rem;" class="cardImg hover">
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="150" label="Oprate" prop="">
                    <template #default="scope">
                        <div class="operation-btns">
                            <el-button type="primary" size="small" @click="handleOperation(scope.row)"
                                       :disabled="scope.row.checkStatus !== 'waiting'">
                                核验
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width: 100%;height: 1rem;" class="flex-c-e">
            <el-pagination style="margin-right: 2.18rem;margin:0.14rem  0; " v-model:current-page="params.page"
                           v-model:page-size="params.pageSize" background="#4180F7"
                           layout="total , prev, pager, next, jumper" :total="total"
                           @current-change="handleCurrentChange"/>
        </div>
    </div>

    <!-- 操作弹窗 -->
    <el-dialog v-model="operationDialogVisible" title="订单操作" width="500px">
        <el-form :model="operationForm" label-width="100px">
            <el-form-item label="操作类型" required>
                <el-radio-group v-model="operationForm.type">
                    <el-radio label="approve">通过</el-radio>
                    <el-radio label="reject">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="true">
                <el-form-item label="实际面额">
                    <el-input v-model="operationForm.actualFaceValue" type="number" rows="3"
                              placeholder="请输入实际面额"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="operationForm.checkMemo" type="textarea" rows="3"
                              placeholder="请输入拒绝原因"></el-input>
                </el-form-item>
                <el-form-item label="上传凭证">
                    <div class="flex-c-s">
                        <el-upload :show-file-list="false" :on-success="onSuccess" ref="uploadRef"
                                   class="uploadDemo flex-c-c"
                                   method="post" :data="uploadData" :headers="headers" :action="baseURL + '/oss/upload'"
                                   :auto-upload="true">
                            <template #trigger>
                                <img v-if="operationForm.image" :src="operationForm.image" alt="" style="border: none;"
                                     class="img">
                                <div v-else class="img flex-c-c">
                                    +
                                </div>
                            </template>
                        </el-upload>
                    </div>
                </el-form-item>
            </template>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="operationDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmOperation">确认</el-button>
            </span>
        </template>
    </el-dialog>

</template>


<script setup>
import {ref, reactive, onMounted,onUnmounted, watch, nextTick} from 'vue'
import {useRouter} from 'vue-router'
import {orderPage, adList, adDetail} from '@/api/order.js'
import {preview} from 'v-preview-image'
import mitt from '@/utils/mitt.js'
import {ElMessage, ElMessageBox} from 'element-plus'
import {dateFormater} from '@/utils/dateFormater'
import baseURL from '@/utils/system/config.js'

const router = useRouter()
import {useStore} from 'vuex'
onUnmounted(() => {
    mitt.off('newMsg')
})
const store = useStore()
onMounted(() => {
    getData()
})
const newMsg = ref({
    data: [
        {payload: ''}
    ]
})
mitt.on('newMsg', data => {
    console.log(data, 'newMsg')
    if (newMsg.value.data[0].payload == data.data[0].payload) {
        return
    } else {
        newMsg.value = data
        getData()
    }
})
const total = ref(0)

const params = reactive({
    page: 1,
    pageSize: 10,
    checkStatus: 'waiting',
})

const tableData = ref([])
const handleCurrentChange = (e) => {
    params.page = e
    getData()

}
const getData = async () => {
    const res = await orderPage(params)
    tableData.value = res.data.records
    total.value = res.data.total
}


const onPredivImage = (index, arr) => {
    preview(index, arr)
}
const headerCellStyle = reactive({
    'background': '#E1ECFF',
    'width': "100%",
    'text-align': 'center',
    'color': '#666',
    'font-family': 'avenir500',
    'font-size': '0.16rem',
    'font-weight': '500',
    'height': '0.6rem',
    'box-sizing': 'border-box'
})
const cellStyle = reactive({
    'text-align': 'center',
    'color': '#666',
    'font-family': 'avenir500',
    'font-size': '0.16rem',
    'font-weight': '500',
    'height': '0.6rem',
    'box-sizing': 'border-box'
})

// 操作弹窗相关
const operationDialogVisible = ref(false)
const currentOrder = ref(null)
const operationForm = reactive({
    type: 'approve',
    checkMemo: '',
    actualFaceValue: '',
    image: null
})

// 处理操作按钮点击
const handleOperation = (row) => {
    currentOrder.value = row
    operationForm.type = 'approve' // 默认选中"通过"
    operationForm.checkMemo = ''
    operationForm.image = null
    operationForm.actualFaceValue = row.faceValue
    operationDialogVisible.value = true
}

// 确认操作
const confirmOperation = async () => {
    if (operationForm.type === 'reject') {
        if (!operationForm.checkMemo && !operationForm.image) {
            ElMessage.warning('请输入拒绝原因或上传图片')
            return
        }
    }

    try {
        if (operationForm.type === 'approve') {
            // TODO: 调用通过API
            const res = await adDetail({
                detailNo: currentOrder.value.detailNo,
                checkStatus: 'passed',
                actualFaceValue: operationForm.actualFaceValue,
                checkMemo: operationForm.checkMemo,
                checkImages: operationForm.image
            })
            if (res.code == 0) {
                ElMessage.success('操作成功')
            }
        } else {
            // TODO: 调用拒绝API
            const res = await adDetail({
                detailNo: currentOrder.value.detailNo,
                checkStatus: 'refused',
                actualFaceValue: operationForm.actualFaceValue,
                checkMemo: operationForm.checkMemo,
                checkImages: operationForm.image
            })
            if (res.code == 0) {
                ElMessage.success('操作成功')
            }
        }

        operationDialogVisible.value = false
        getData()
    } catch (error) {
        ElMessage.error('操作失败')
    }
}

const headers = reactive({
    'token': localStorage.getItem('token')
})
const uploadData = reactive({
    folder: 'chatWebPhoto'
})
const imgList = ref([])
const loading = ref(false)
const beforeUpload = () => {
    loading.value = true
}
const onError = () => {
    loading.value = false
}
const onSuccess = (data) => {
    if (data.code == 0) {
        operationForm.image = data.data
        ElMessage.success('上传成功')
    } else {
        ElMessage({
            message: 'upload fail',
            type: 'warning',
        })
    }
}
</script>


<style lang="less" scoped>
.container {
    height: 100%;

    .allBox {
        width: 1.93rem;
        height: 0.4rem;
        margin-right: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        position: relative;
        color: #2E3034;
        font-family: ff400;
        font-size: 0.14rem;
        font-weight: 400;
        background: #fff;
        border-radius: 0.08rem;
        box-shadow: 0rem 0.02rem 0.05rem rgba(0, 0, 0, .3);
        padding-left: 0.2rem;
        padding-right: 0.08rem;
        box-sizing: border-box;

        .down {
            width: 0.08rem;
            height: 0.08rem;
        }
    }

    .searchBox {
        width: 2.5rem;
        display: flex;
        height: 0.4rem;
        background: #fff;
        border-radius: 0.08rem;
        box-shadow: 0rem 0.02rem 0.05rem rgba(0, 0, 0, .3);
        margin-right: 0.2rem;
    }


    .tabelBox {
        /* height: calc(100% - 1.48rem); */
        overflow: hidden;
        overflow-y: auto;
    }
}

.operation-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.img {
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #8c939d;
}
</style>


<style lang="less">
.allBox,
.transAmountBox {
    .el-date-editor .el-range__icon {
        display: none;
    }

    .el-range-editor.el-input__wrapper {
        padding: 0 !important;
        padding-left: 0.02rem !important;
    }

    .el-range-editor--small .el-range-input {
        font-size: 0.1rem !important;
    }

    .el-date-editor .el-range-separator {
        padding: 0 !important;
        /* align-items: normal !important; */
        /* width: 0.02rem !important; */
        flex: 0.5 !important;
    }
}

.section {
    .el-input__wrapper {
        box-shadow: none !important;
    }

    .el-input__inner:hover {
        cursor: pointer;
    }

    .el-input__wrapper .is-focus {
        box-shadow: none !important;
    }

}

.el-range-input {
    cursor: pointer;
}
</style>